<template>
    <div style="background: #f2f2f2;">
        <header class="resviseTop">
            <img src="../../images/left.png" alt="" @click="$router.back(-1)">
            <span class="resvise_title">推荐有奖</span>
        </header>
        <!--top-->
        <div class="bg_blue"></div>
        <div class="apprentice_box">
            <div class="invtite" v-if="tasks.user_invite_code">
                <div>
                    <h3>邀请码</h3>
                    <p>{{ tasks.user_invite_code }}</p>
                </div>
                <div v-clipboard="tasks.user_invite_code" @success="handleSuccess" @error="handleError">复制邀请码</div>
            </div>
            <div class="appren">
                <div>
                    <span>{{ tasks.today_relationships }}人</span>
                    <p>今日收徒</p>
                </div>
                <div>
                    <span>{{ tasks.total_relationships }}人</span>
                    <p>全部收徒</p>
                </div>
            </div>
        </div>
        <!--输入邀请码-->
        <div class="box_entry">
            <div class="entry">
                <div>
                    <input type="text" placeholder="请输入师傅邀请码" v-model="invite_code">
                    <p>(拜师成功奖励<span>{{ tasks.invite_award }}</span>元)</p>
                </div>
                <span @click="relationships()">拜师</span>
            </div>
        </div>
        <!--btn-->
        <div class="btn_apprent">
            <div><a href="https://wb.renqidaren.com/index/invite">收徒技巧</a></div>
            <div><a href="https://wb.renqidaren.com/app_html/gonglue.html">奖励规则</a></div>
        </div>
        <!--分享-->
        <div class="shoutu_app" v-if="!iosApp">
            <ul>
                <li @click="$toast('请点击微信右上角进行分享')">
                    <img src="../../img_myself/11.png" alt="">
                    <p>QQ收徒</p>
                </li>
                <li @click="$toast('请点击微信右上角进行分享')">
                    <img src="../../img_myself/12.png" alt="">
                    <p>微信收徒</p>
                </li>
                <li @click="$toast('请点击微信右上角进行分享')">
                    <img src="../../img_myself/13.png" alt="">
                    <p>朋友圈收徒</p>
                </li>
                <li v-if="invite.invite_link_and" v-clipboard="invite.invite_link_and" @success="handleSuccess"
                    @error="handleError">
                    <img src="../../img_myself/14.png" alt="">
                    <p>短信收徒</p>
                </li>
                <li @click="hiden = !hiden">
                    <img src="../../img_myself/15.png" alt="">
                    <p>二维码收徒</p>
                </li>
                <li v-if="invite.invite_link_and" v-clipboard="invite.invite_link_and" @success="handleSuccess"
                    @error="handleError">
                    <img src="../../img_myself/16.png" alt="">
                    <p>我的收徒链接</p>
                </li>
            </ul>
        </div>
        <!--二维码收徒-->
        <div v-if="hiden">
            <div class=erweima>
                <div>
                    <img :src="inviteQrcode" alt="" v-if="inviteQrcode">
                    <p>邀请二维码</p>
                    <p><span>长按保存二维码</span></p>
                    <div @click="hiden = !hiden">取消</div>
                </div>
            </div>
            <div class="box_show"></div>
        </div>
        <div class="iosApp" v-if="iosApp">
            <img :src="inviteQrcode" alt="" v-if="inviteQrcode">
            <p>长按识别二维码</p>
            <div class="iosAppBtn" v-if="invite.invite_link_and"><span v-clipboard="invite.invite_link_and"
                                                                       @success="handleSuccess" @error="handleError">复制邀请链接</span>
            </div>
        </div>
        <div class="fixed_color"></div>

    </div>

</template>


<script>
    import api from '../../utils/api';

    export default {
        name: "Apprentice",
        data() {
            return {
                shoutuUrl: '啦啦啦啦啦啦啦',
                hiden: false,
                tasks: [],
                invite: this.$root.invite,
                inviteQrcode: '',
                invite_code: '',
                iosApp: false
            }
        },
        methods: {
            handleSuccess(e) {
                this.$toast('复制成功')
            },
            handleError(e) {
                this.$toast('复制失败，此机型不支持微信端复制')
            },
            async relationships() {
                var _that = this;
                if (this.invite_code) {
                    await api.request('/relationships', 'POST', {user_invite_code: _that.invite_code}).then(function (res) {
                        _that.$toast(res.message);
                        _that.invite_code = '';
                    })
                } else {
                    _that.$toast('请输入邀请码')
                }
            }
        },
        mounted() {
            document.body.scrollTop = 0;
        },
        async created() {
            var that = this;
            await api.request('/invite', 'get', {}).then(function (res) {
                that.tasks = res.data.data;
            })
            await api.request('/inviteQrcode', 'get', {}).then(function (res) {
                that.inviteQrcode = res.data.data
            })
            if (/(iPhone|iPad|iPod|iOS)/i.test(navigator.userAgent)) {
                this.iosApp = true
            }
        }

    }
</script>

<style scoped="css">
    @import "../../style/apprentice.css";

    .fixed_color {
        background: #f2f2f2;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: -1;
    }
</style>
